<template>
  <div class="menu-container">
    <ul class="append-menu">
      <li style="border-top-left-radius: 4px; border-top-right-radius: 4px">
        <i class="iconfont icon-time-data"></i>
      </li>
    </ul>
    <ul
      class="append-menu"
      style="border-top: 1px solid black; border-bottom: 1px solid black"
    >
      <li
        v-for="i of character"
        @click="defaultMethods(i.click)"
        :title="i.name"
      >
        <i :class="i.icon"></i>
        <ul class="append-option">
          <li v-for="j of i.option">
            <span>{{ j.name }}</span>
            <span>{{ i.predict }}</span>
          </li>
        </ul>
        <div class="hidden-div" style=""></div>
        <ul v-if="i.name === '预警探测'" class="predict_pane">
          <li v-for="k of predict">
            <p>{{ k.item }}</p>
            <p>
              <el-slider
                v-if="k.item === '高度'"
                v-model="k.val"
                :min="0"
                :max="20000"
                :step="100"
                @change="heightChangeChild"
              ></el-slider>
              <el-slider
                v-if="k.item !== '高度'"
                v-model="k.val"
                :min="0"
                :max="30"
                :step="0.5"
                @change="heightChangeChild"
              ></el-slider>
            </p>
            <p>{{ k.val }} {{ k.unit }}</p>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="append-menu">
      <li
        @click="clickAllExpand()"
        title="状态变化详情"
        style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px"
      >
        <i class="iconfont icon-tongs"></i>
      </li>
    </ul>
  </div>
</template>


<script>
import "./appendMenu.less";
import storeData from "./../../../tools/vuex-store";

export default {
  name: "append-menu",
  props: ["list", "AllHeightChange", "closeAbilityAnalysis"],
  data() {
    return {
      map: this.list.map,
      pointObj: this.list.pointObj,
      publicLayer: this.list.publicLayer,
      mainPage: this.list.mainPage,
      abilityAnalysisShow: this.list.abilityAnalysisShow,
      rightModalShow: this.list.rightModalShow,
      character: [
        {
          name: "预警探测",
          option: [
            {
              name: "预警探测范围",
              option: { item: "高度", val: 9000, unit: "米" },
            },
            {
              name: "预警探测面积",
              predict:
                [] /*option: {item: '雷达截面积', val: 2000, unit: '米'}*/,
            },
            { name: "可预警目标类型", predict: [] },
          ],
          click: "AllAbilityAnalysis",
          icon: "iconfont icon-detection",
        },
        {
          name: "防空反导",
          option: [
            { name: "火力覆盖区" },
            { name: "反导保卫区" },
            { name: "火力密度" },
          ],
          icon: "iconfont icon-airDefense",
        },
        { name: "指挥指控", option: [], icon: "iconfont icon-airControl" },
        { name: "先制反制", option: [], icon: "iconfont icon-area" },
      ],
      predict: [
        { item: "高度", val: 8000, unit: "米" },
        { item: "rcs", val: 5, unit: "" },
      ],
    };
  },
  mounted() {},
  methods: {
    defaultMethods(name) {
      if (name !== undefined) {
        this[name]();
      }
    },
    clickAllExpand() {
      console.log(this.abilityAnalysisShow, this.rightModalShow);
      const pointObj = this.pointObj,
        $this = this.list.mainPage,
        that = this;
      let layer,
        flag = false,
        isUndefined = true;

      // 禁止重复的创造框选范围
      for (const i in pointObj) {
        isUndefined = false;
        if (this.publicLayer[i] === undefined) {
          flag = true;
          break;
        }
      }

      // 判断地图上有没有节点
      if (isUndefined)
        this.$message({
          showClose: true,
          message: "地图上没有节点！",
          type: "error",
        });

      for (const i in pointObj) {
        if (this.publicLayer[i] === undefined) {
          this.$store.dispatch("ajax", {
            url: "api/entityList/queryEntityStatus",
            method: "post",
            data: { ids: [i.toString()] },
            succeed: (res) => {
              if (res.rows[i].length === 0) return;
              const resAttr = res.rows[i];
              let html = '<ul class="map_item">';

              for (let k = 0; k < resAttr.length; k++) {
                html += `<li>
                                <div class="state-text">${
                                  k + 1 + ". " + resAttr[k]["名称"]
                                }
                                <div class="state-text-detail">`;
                let detailHtml = `<ul>`;
                for (const j in resAttr[k]) {
                  if (j !== "信息来源") {
                    detailHtml += `
                                                  <li class="state-text-list">
                                                    <span>${j}</span>：${resAttr[k][j]}
                                                  </li>`;
                  } else {
                    detailHtml += `
                                                  <li class="state-text-list">
                                                    <span>${j}</span>：<a href="${resAttr[k][j]}" target="_blank">${resAttr[k][j]}</a>
                                                  </li>`;
                  }
                }
                detailHtml += `</ul>`;
                html += storeData.actions.defaultNzmodatl({
                  title: "状态变化详情",
                  html: detailHtml,
                  parameter: {
                    height: "312px",
                    left: "-400px",
                    top: "-373px",
                    width: "390px",
                  },
                });
                html += `<img src="globle/image/line_img-left.png" alt="" class="line-left" style="float: right"></div>
                                        </div>
                                </li>`;
              }
              html += "</ul>";

              layer = L.popup({ autoClose: false, closeOnClick: false })
                .setLatLng(pointObj[i].attr.position)
                .setContent(html);
              $this.map.openPopup(layer);
              $this.publicLayer[i] = layer;
            },
          });
        } else if (flag === false) {
          $this.map.closePopup(this.publicLayer[i]);
          delete $this.publicLayer[i];
        }
      }
    },
    // 打开全部节点对象的雷达半径
    AllAbilityAnalysis: function () {
      let select = false;
      // this.rightModalShow = !rightModalShow;
      for (const i in this.pointObj) {
        if (i !== "") {
          select = true;
          break;
        }
      }
      if (select) {
        /*                    this.abilityAnalysisShow = !this.abilityAnalysisShow;
                                        this.rightModalShow = !this.rightModalShow;*/

        // 修改父组件的值
        this.list.mainPage.abilityAnalysisShow = this.abilityAnalysisShow;
        this.list.mainPage.rightModalShow = this.rightModalShow;
      } else {
        this.$message({
          showClose: true,
          message: "地图上没有节点！",
          type: "error",
        });
      }
    },
    heightChangeChild() {
      this.$emit("AllHeightChange", this.predict);
    },
  },
};
</script>

<style scoped>
</style>